<template>
    <view>
        <u-navbar title="个人中心" :is-back="false" title-color="#efefef" :background="background">
        </u-navbar>
        <view class="wrap">
            <view v-if="token==''">
                <view class="title">
                    <view class="avator">
                        <u-avatar src="/static/logo.png" size="large"></u-avatar>
                    </view>
                    <view class="name" @click="goLogin()">
                        未登录，请点击登录
                    </view>
<!--                    <view class="icon" @click="goSetting()">
                        <u-icon size="60" name="setting" color="#606060" label="设置" label-pos="bottom" label-size="25"
                        label-color="#5f5f5f"></u-icon>
                    </view> -->
                </view>
            </view>
            <view v-else>
                <view class="title">
                    <view class="avator">
                        <u-avatar :src="userInfo.avatar"  size="large"></u-avatar>
                    </view>
                    <view class="name" @click="goMyInfo()">
                       {{ userInfo.username }}
                       <view class="lasttime">
                           最后登录：{{userInfo.lastlogin}}
                       </view>
                    </view>
<!--                    <view class="icon" @click="goSetting()">
                        <u-icon size="60" name="setting" color="#606060" label="设置" label-pos="bottom" label-size="25"
                        label-color="#5f5f5f"></u-icon>
                    </view> -->
                </view>
            </view>
            <view class="follow" @click="goAttention()">
                <view class="myfollow">
                    <view class="number">
                        {{attentionNumber}}
                    </view>
                    <view class="fname">
                        关注
                    </view>

                </view>
                <view class="myline">
                    <u-line direction="col" color="black" length="50%" margin="20rpx 0" />
                </view>
                <view class="tofollow">
                    <view class="number">
                        {{followNumber}}
                    </view>
                    <view class="fname">
                        粉丝
                    </view>

                </view>
            </view>
            <view class="box" @click="myStar()">
                <u-icon label="我的收藏" label-size="32" margin-left="10" size="50" name="star"></u-icon>
                <view class="right">
                    <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon>
                </view>
            </view>
            <view class="box" @click="gomyforum()">
                <u-icon label="我的帖子" label-size="32" margin-left="10" size="50" name="calendar"></u-icon>
                <view class="right">
                    <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon>
                </view>
            </view>

            <view class="box" @click="gomycomment()">
                <u-icon label="我的评论" label-size="32" margin-left="10" size="50" name="list-dot"></u-icon>
                <view class="right">
                    <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon>
                </view>
            </view>
            <view class="box" @click="goMyInfo()">
                <u-icon label="我的信息" label-size="32" margin-left="10" size="50" name="order"></u-icon>
                <view class="right">
                    <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon>
                </view>
            </view>
            <view class="box" @click="goSetting()" style="margin-top: 30rpx;">
                <u-icon label="设置" label-size="32" margin-left="10" size="50" name="setting"></u-icon>
                <view class="right">
                    <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon>
                </view>
            </view>
            <!-- <view class="footer" v-if="token!=''">
                <view class="button">
                    <u-button @click="switchAccount()">切换账号</u-button>
                </view>
                <view class="button">
                    <u-button @click="logout()">退出</u-button>
                </view>
            </view> -->
        </view>
        
       
    </view>
</template>
<script>
    import { getMyAANdF } from "@/api/data.js"
    import { logout } from "@/api/login.js"
    export default {
        data() {
            return {
                background: {
                    // backgroundColor: '#ffffff',
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                userInfo: {},
                token: '',
                attentionNumber: 0,
                followNumber: 0,
            }
        },
        onLoad() {
            
            // console.log(this.$store.state.token)
            
        },
        onShow() {
            console.log(uni.getStorageSync('token'))
            this.token = uni.getStorageSync('token')
            this.userInfo = uni.getStorageSync('userInfo')
            console.log(this.userInfo)
            if(this.token!=''){this.getMyAttentionAndFollow()}
            
            
        },
        methods:{
            goLogin(){
                uni.navigateTo({
                    url: '/pages/login/index'
                });
            },
            myStar(){
                this.dontlogin()
                if(this.token!=0){
                uni.navigateTo({
                    url: '/pages/personal/Collection/index?userId='+this.userInfo.id
                });
                }
                // uni.showLoading({
                //      title: '加载中'
                // })
                // setTimeout(function () {
                //     uni.hideLoading();
                // }, 2000);
            },
            gomyforum(){
                this.dontlogin()
                if(this.token!=0){
                uni.navigateTo({
                    url: '/pages/personal/myforum/index?userId='+this.userInfo.id
                });
                }
            },
            gomycomment(){
                this.dontlogin()
                if(this.token!=0){
                uni.navigateTo({
                    url: '/pages/personal/mycomment/index?userId='+this.userInfo.id
                });
                }
            },
            goMyInfo(){
                this.dontlogin()
                if(this.token!=0){
                uni.navigateTo({
                    url: '/pages/personal/myInfo/index?userId='+this.userInfo.id
                });
                }
            },
            getMyAttentionAndFollow(){
                const _this = this
                getMyAANdF({
                    userId: this.userInfo.id
                }).then(function(res){
                    _this.attentionNumber = res.data.data.attentionNumber
                    _this.followNumber = res.data.data.followNumber
                })
            },
            dontlogin() {
                if (this.token == '') {
                    uni.showModal({
                        title: '提示',
                        content: '您还未登录，请登录后再操作',
                        cancelText: '稍后再试',
                        success: function(res) {
                            if (res.confirm) {
                                uni.navigateTo({
                                    //1为添加，2为回复
                                    url: '/pages/login/index'
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
            
                }
            
            },
            switchAccount(){
                uni.navigateTo({
                    url: '/pages/login/index'
                });
            },
            logout(){
                uni.showModal({
                    title: '提示',
                    content: '确定退出该账号？',
                    success: function(res) {
                        if (res.confirm) {
                            logout().then()
                            uni.removeStorageSync('token')
                            uni.navigateTo({
                                //1为添加，2为回复
                                url: '/pages/login/index'
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            goSetting(){
                uni.navigateTo({
                    url: '/pages/personal/setting/index'
                });
            },
            goAttention(){
                this.dontlogin()
                if(this.token!=0){
                uni.navigateTo({
                    url: '/pages/personal/attention/index?userId='+this.userInfo.id
                });
                }
            }
            
        }
        
    }
</script>
<style lang="scss" scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        // background-color: #fffaf0;
        background-color: #f8f8f8;
    }

    .title {
        display: flex;
        padding: 30rpx;
        height: 180rpx;

        // margin: 0 auto;
        .avator {
            flex: 0 0 20%;
            padding: 0 20rpx 10rpx;

        }

        .name {
            margin: 30rpx 0;
            font-size: 40rpx;
            flex: 0 0 80%;
            // display: inline-block;
            // content: "";
            // height: 100%;
            // position: absolute;
            // background-color: red;
            // margin: 0 auto;

        }
        .icon {
            flex: 0 0 20%;
            margin: 20rpx 0;
        }
    }

    .follow {
        display: flex;
        // padding: 30rpx;
        height: 100rpx;
        // margin: 0 auto;
        margin: 20rpx 50rpx;

        // font-size: 32rpx;
        .myfollow,
        .tofollow {
            flex: 0 0 45%;
            text-align: center;

            .number {
                font-size: 32rpx;
                color: #3F536E;
                padding: 5rpx;
            }

            .fname {
                font-size: 28rpx;
                color: #797979;
            }
        }

        .myline {
            flex: 0 0 10%;
            text-align: center;
        }

    }

    .box {
        padding: 20rpx 30rpx;
        // margin-top: 30rpx;
        margin: 5rpx 10rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
        font-size: 32rpx;

        .right {
            float: right;
            margin: 10rpx 10rpx 0;
            
        }
    }
    .footer {
        margin-top: 320rpx;
        .button {
            padding: 15rpx 0;
        }
        
    }
    .lasttime{
        font-size: 23rpx;
        color: #9D9D9D;
    }
</style>
